import React, { useState } from 'react';
import { Form, Input, Button, Card, Typography, message, Divider } from 'antd';
import { UserOutlined, LockOutlined, MobileOutlined } from '@ant-design/icons';
import { useNavigate, useLocation } from 'react-router-dom';
import { User } from '../../types';
import { Storage, STORAGE_KEYS } from '../../utils/storage';

const { Title, Text, Link } = Typography;

const Login: React.FC = () => {
  const [loading, setLoading] = useState(false);
  const [loginType, setLoginType] = useState<'password' | 'sms'>('password');
  const navigate = useNavigate();
  const location = useLocation();

  const from = location.state?.from?.pathname || '/';

  const handleLogin = async (values: any) => {
    setLoading(true);
    
    try {
      // 模拟登录验证
      await new Promise(resolve => setTimeout(resolve, 1000));
      
      // 模拟用户数据
      const user: User = {
        id: '1',
        username: values.username || values.phone,
        email: 'user@mall.com',
        phone: values.phone || '13800138000',
        avatar: 'https://via.placeholder.com/40x40?text=User'
      };
      
      Storage.set(STORAGE_KEYS.USER, user);
      message.success('登录成功');
      navigate(from, { replace: true });
    } catch (error) {
      message.error('登录失败，请检查用户名和密码');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div style={{ 
      minHeight: '100vh', 
      display: 'flex', 
      alignItems: 'center', 
      justifyContent: 'center',
      background: '#f5f5f5'
    }}>
      <Card style={{ width: 400, boxShadow: '0 4px 12px rgba(0,0,0,0.1)' }}>
        <div style={{ textAlign: 'center', marginBottom: 32 }}>
          <Title level={2} style={{ color: '#1890ff' }}>商城系统</Title>
          <Text type="secondary">欢迎登录</Text>
        </div>

        <div style={{ marginBottom: 24, textAlign: 'center' }}>
          <Button 
            type={loginType === 'password' ? 'primary' : 'default'}
            onClick={() => setLoginType('password')}
            style={{ marginRight: 8 }}
          >
            密码登录
          </Button>
          <Button 
            type={loginType === 'sms' ? 'primary' : 'default'}
            onClick={() => setLoginType('sms')}
          >
            短信登录
          </Button>
        </div>

        <Form onFinish={handleLogin} size="large">
          {loginType === 'password' ? (
            <>
              <Form.Item 
                name="username" 
                rules={[{ required: true, message: '请输入用户名' }]}
              >
                <Input 
                  prefix={<UserOutlined />} 
                  placeholder="用户名/手机号/邮箱" 
                />
              </Form.Item>
              <Form.Item 
                name="password" 
                rules={[{ required: true, message: '请输入密码' }]}
              >
                <Input.Password 
                  prefix={<LockOutlined />} 
                  placeholder="密码" 
                />
              </Form.Item>
            </>
          ) : (
            <>
              <Form.Item 
                name="phone" 
                rules={[
                  { required: true, message: '请输入手机号' },
                  { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确' }
                ]}
              >
                <Input 
                  prefix={<MobileOutlined />} 
                  placeholder="手机号" 
                />
              </Form.Item>
              <Form.Item 
                name="smsCode" 
                rules={[{ required: true, message: '请输入验证码' }]}
              >
                <Input.Search
                  placeholder="验证码"
                  enterButton="获取验证码"
                  onSearch={() => message.info('验证码已发送')}
                />
              </Form.Item>
            </>
          )}

          <Form.Item>
            <Button 
              type="primary" 
              htmlType="submit" 
              style={{ width: '100%' }} 
              loading={loading}
            >
              登录
            </Button>
          </Form.Item>
        </Form>

        <Divider>或</Divider>

        <div style={{ textAlign: 'center' }}>
          <Text type="secondary">
            还没有账号？ 
            <Link onClick={() => message.info('注册功能开发中')}>立即注册</Link>
          </Text>
        </div>

        <div style={{ textAlign: 'center', marginTop: 16 }}>
          <Text type="secondary" style={{ fontSize: '12px' }}>
            测试账号：任意用户名 密码：任意
          </Text>
        </div>
      </Card>
    </div>
  );
};

export default Login;
